<template>
	<view>
		<view class="succeedbg">
			<!-- <img :src="data.qr_code" mode=""> -->
			<view class="QRcodes">
				<image class="QRcode" :src="url" mode=""></image>
			</view>
			<view class="box">
				<!-- <view class="flex-start">
					<image class="avatar" :src="user_info.avatar" mode=""></image>
					<view class="">{{user_info.nickname}}</view>
				</view> -->
				<!-- <view class="mobile">手机号：{{user_info.mobile}}</view> -->
				<view class="mobile">门店推客剩余数量：{{user_info.user_places}}个</view>
			</view>
			<view class="fanbox" style="padding: 14rpx 0; background: #f6f6f6;">
				<view v-if="!fansList" style="padding: 30rpx;background: #ffffff;font-weight: bold;">我的授权推客</view>
				
			<view class="flex" v-for="(item, index) in fansList" style="padding:18rpx 30rpx; background: #ffffff;">
				<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
				<view class="fans-info m-l-20">
					<view class="flex-s ">
						<view class="fans-name bold line-1">{{item.nickname}}</view>
					</view>
					<view class="flex lighter m-t-20" style="font-size: 26rpx; color: #8f8f8f">
						<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
						<view>{{item.create_time}}</view>
					</view>
				</view>
			</view>
			</view>
			<view style="padding: 30rpx;background: #ffffff;font-weight: bold;">介绍</view>
			<view class="content margin30" v-html="data.help_text.content"></view>
		</view>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/mmmm-image-tools/index.js'
	import {ApplyQrcode,getUserFans} from '@/api/user';
	export default {
		name: "share-poster",
		components: {
		},
		data() {
			return {
				data:[],
				fansList:[],
				user_info:[],
				url:''
			}
		},
		onLoad() {
			this.getApplyQrcode()
			this.getUserFans()
		}, 
		methods: {
			getUserFans(){
				getUserFans({
					page_size:10,
					page_no:1,
					level:3
				}).then(({
					data
				}) => {
					this.fansList = data.list;
					console.log('2',data)
				}).catch(() => {
					
				})
			},
			getApplyQrcode(){
				ApplyQrcode().then(res => {
					if (res.code == 1) {
						this.data = res.data.data
						base64ToPath(this.data.qr_code)  //base64转图片
							.then(url => {
							this.url=url
						})
						this.user_info = res.data.user_info
						this.data = res.data
					}
				});
			},
			//保存二维码
			downcode() {
				let that = this;
				uni.downloadFile({
					url: that.data.img_url,
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							// uni.saveImageToPhotosAlbum({
							// 	filePath: res.tempFilePath,
							// 	success: function() {
							// 		that.apifun.toast("图片保存成功")
							// 	},
							// 	fail: function() {
							// 		that.apifun.toast("保存失败，请稍后重试")
							// 	}
							// });
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		padding-bottom: 40rpx;
	}
.succeedbg{
	background-color: #fff;
	margin: 0 30rpx;
	border-radius: 14rpx;
	padding-bottom: 40rpx;
}
.QRcodes{
	width: 400rpx;
	margin: 0 auto;
	/* background-color: #fff; */
}
.QRcode{
	width: 400rpx;
	height: 400rpx;
	margin-top: 70rpx;
}
.box{
	width: 460rpx;
	margin: 40rpx auto;
	margin-bottom: 30rpx;
}
.avatar{
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.mobile{
	margin-top: 34rpx;
	text-align: center;
}
.content{
	/* margin-top: 20rpx; */
	color: #3b3b3b;
}
</style>
